<template>
  <div class="page-carousel">
    <el-carousel trigger="click"
                 arrow="hover"
                 :interval="20000"
                 height="430px">
      <el-carousel-item v-for="item in carouselList"
                        :key="item.articleId">
        <div class="titles">
          <p><span>{{item.createTime.split('-')[0]}} /</span>{{item.createTime.split('-')[1]}}</p>
          <p>{{item.articleTitle}}</p>
        </div>
        <img :src="item.articleCover"
             @click="goDetailRecPage(item.articleId)"
             alt="">
      </el-carousel-item>
    </el-carousel>

  </div>
</template>

<script>
import { getBanner } from '@/api/article'
export default {
  data() {
    return {
      carouselList: []
    }
  },
  methods: {
    /* 跳转到详情页 */
    goDetailRecPage(id) {
      this.$router.push({
        path: 'recomarticle',
        query: {
          articleId: id
        }
      })
    },
    /* 获取轮播图内容 */
    async initGetBanner() {
      let { data: res } = await getBanner()
      // console.log(res.data)
      this.carouselList = res.data
    }
  },
  created() {
    this.initGetBanner()
  }
}
</script>

<style lang="less" scoped>
.page-carousel {
  width: 100%;
  /* 走马灯 */
  :deep(.el-carousel) {
    width: 100%;
    /* 具体每一页内容 */
    .el-carousel__item {
      /* 标题文字 */
      .titles {
        width: 100%;
        position: absolute;
        top: 40px;
        left: 160px;
        font-size: 22px;
        font-weight: normal;
        text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
        p,
        span {
          color: #fff;
        }
        p {
          padding-top: 5px;
        }
        span {
          padding-right: 6px;
          font-size: 26px;
        }
      }
    }
    /* 指示器 */
    .el-carousel__indicators--horizontal {
      bottom: 10px;
    }
    .el-carousel__indicator {
      .el-carousel__button {
        display: block;
        margin-right: 3px;
        width: 38px;
        height: 5px;
        background-color: rgba(255, 255, 255, 0.4);
      }
    }
    /* 指示器获取焦点时样式 */
    .is-active {
      .el-carousel__button {
        background-color: #fff;
      }
    }
    /* 箭头 */
    .el-carousel__arrow {
      height: 55px;
      width: 55px;
      font-size: 35px;
      background-color: rgba(45, 59, 75, 0.3);
      i {
        color: #fff;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>